<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      万兹莱|螺杆空压机|永磁变频空压机|节能空压机|万兹莱压缩机械（上海）有限公司
    </title>
    <!-- <link rel="stylesheet" href="bootstrap.min.css" />
    <script src="bootstrap.bundle.min.js"></script> -->

    <link rel="stylesheet" href="flickity.min.css" />
    <script src="flickity.pkgd.min.js"></script>

    <link rel="stylesheet" href="spectre.min.css" />
    <link rel="stylesheet" href="spectre-icons.min.css" />
    <style>
      html {
        scroll-behavior: smooth;
      }

      .contact-box-wrapper {
        position: relative;
      }

      .contact-box {
        position: fixed;
        right: 6px;
        top: 52vh;
        z-index: 1;
        /* display: none; */
      }

      .contact-box li {
        margin: 0;
      }

      .contact-box button {
        /* display: block; */
        background: url("elevator.png") no-repeat;
        width: 48px;
        height: 48px;
        border: none;
        cursor: pointer;
      }

      .contact-box button.contact-box-chat {
        background-position: 0 43%;
      }

      .contact-box button.contact-box-chat:hover {
      }

      .contact-box button.contact-box-phone {
        background-position: 39% 55%;
      }
      .contact-box button.contact-box-wechat {
        background-position: 0 86.5%;
      }
      .contact-box button.contact-box-top {
        background-position: 0 67.2%;
      }
      .contact-box button.contact-box-top:focus {
        outline: none;
      }

      header {
        background-color: rgba(6, 129, 170, 0.9);
        padding: 8px;
      }

      header .container {
        max-width: 1200px;
        padding-left: 1em;
        padding-right: 1em;
      }

      .btn.text-white {
        color: white;
      }

      footer {
        background-color: rgba(6, 129, 170, 0.9);
        color: white;
      }

      #copyright {
        padding: 0.5em 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }

      nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      nav ul a:link,
      nav ul a:visited {
        color: white;
      }

      footer {
        padding: 1em 0 0;
      }

      .footer-nav-title {
        font-size: 1em;
        margin-bottom: 1em;
      }

      .footer-nav li {
        line-height: 1.2;
      }

      .footer-nav li:not(:first-of-type) {
        font-size: small;
      }

      .footer-trans {
        opacity: 0.6;
      }

      ul.news-list {
        list-style: none;
        font-size: 12px;
        line-height: 30px;
      }

      .news-list h1 {
        font-size: 18px;
      }

      .news-list p {
        margin: 0;
      }

      .news-list li:not(:last-of-type) > :nth-child(2) {
        /* border-bottom: 1px solid #eceef0; */
      }

      .news-list li {
        border-bottom: 1px solid #eceef0;
      }

      .f-center {
        display: flex;
        align-items: center;
      }

      ul {
        list-style: none;
        margin: 0;
      }

      .customer-list li {
        margin: 0;
        border-left: 1px solid #dfdfdf;
        border-top: 1px solid #dfdfdf;
      }

      #calc {
        margin-top: 4em;
      }

      .calc-inputs {
        margin-bottom: 2em;
      }

      .calc-inputs-item {
        margin-bottom: 1em;
        display: flex;
        align-items: center;
      }

      .calc-inputs-item > div {
        width: 4em;
        margin-right: 1em;
        text-align: center;
      }

      .calc-inputs-item > input {
        /* padding: 0.4em 0.8em; */
        padding: 0.5em 0.3em;
      }

      .calc-inputs-buttons {
        margin-top: 4em;
      }

      .calc-inputs-buttons input {
        border: none;
        background: white;
        color: black;
        padding: 0 3em;
        margin-right: 2em;
      }

      .calc-page {
        background: #0892b7;
        color: white;
      }

      .products-gallary > div {
        background-color: rgba(6, 129, 170, 0.9);
        border-right: 1px solid #fff;
        padding: 0px 0px 60px 0;
      }

      .products-gallary > div:hover {
        background-color: rgba(35, 57, 65, 0.9);
      }

      .products-gallary span {
        color: white;
        font-weight: 600;
        text-shadow: 0 2px 10px rgb(0 0 0 / 50%);
        margin: 4em 0 0;
        transition: margin 1s 0s;
      }

      .products-gallary > div:hover span {
        margin-top: 1em;
      }

      .products-gallary span::before {
        content: "→";
        font-weight: normal;
        font-size: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        width: 32px;
        height: 32px;
        text-align: center;
        line-height: 31px;
        color: rgb(255, 255, 255);
        border-width: 1px;
        border-style: solid;
        border-color: rgb(255, 255, 255);
        border-image: initial;
        border-radius: 50%;
      }

      .products-gallary a {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .products-gallary a:hover {
        text-decoration: none;
      }

      .core-tech {
        background-image: url("12hexinbg.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }

      /* https://css-tricks.com/custom-list-number-styling/ */
      ol.features-list {
        list-style: none;
        counter-reset: my-awesome-counter;
      }

      ol.features-list li {
        counter-increment: my-awesome-counter;
        margin: 0;
        line-height: 2;
        font-size: 14px;
      }

      ol.features-list li::before {
        content: counter(my-awesome-counter) ". ";
        color: #00a0dc;
        font-weight: bolder;
      }

      .core-tech-left {
        /* background-color: rgba(0, 0, 0, 0.5); */
        color: #eee;
        padding: 3em;
        padding-right: 0;
      }

      .carousel img {
        /* display: block; */
        /* height: 100vh; */
      }

      /* position dots in carousel */
      .flickity-page-dots {
        bottom: 4px;
      }

      header {
        position: relative;
      }

      .secondary-nav {
        position: absolute;
        top: 0;
        right: 4em;
      }

      .secondary-nav .btn-link {
        font-size: small;
        /* padding: 0 2em; */
        /* margin: 0 2em; */
        padding-left: 2em;
        /* height: 100%; */
        border-left: 1px solid #68a2b5;
        line-height: 1;
      }

      .main-nav {
        padding-top: 1em;
      }

      .wechat-qr,
      .phone {
        width: 170px;
        height: 204px;
        background: url("elevator.png") no-repeat;
        background-position: 100% 0;
      }

      .phone {
        background-position: 100% 26%;
      }

      .contact-box .popover-container {
        width: max-content;
      }

      .popover .popover-container {
        width: max-content;
      }

      .components h4 {
        font-size: 1.1em;
        font-weight: 600;
        line-height: 2;
        padding-left: 1em;
        color: white;
        background: linear-gradient(to right, #004391, #00a0dc);
      }

      .components p {
        text-indent: 2em;
        font-size: small;
      }

      .bands-gallery .img-box {
        height: calc(266px / 2 - 2px);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .bands-gallery img {
        display: block;
        height: 100%;
        max-width: 100%;
        opacity: 0.5;
        filter: grayscale(100%);
        transition: 0.3s;
        cursor: pointer;
      }

      .bands-gallery img:hover {
        opacity: 1;
        filter: none;
        height: 90%;
      }

      .customer-list-left {
        position: relative;
      }

      .clients-nav {
        position: absolute;
        right: 1em;
        top: 1em;
      }

      .clients-nav button {
        /* background: rgba(0, 0, 0, 0); */
      }

      .testimonial-card {
        /* height: min-content; */
        background: #f9f9f9;
        border: 1px solid #dfdfdf;
      }

      .testimonial-card:nth-of-type(2n + 1) {
        /* margin-right: 2em; */
      }

      .testimonial-card {
        margin: 1em;
      }

      .testimonial-card img {
        display: block;
        max-width: 100%;
      }

      .testimonial-card article {
        padding: 1em;
        padding-bottom: 0.5em;
        border-left: 1px solid #dfdfdf;
        /* height: 200px;
        overflow: hidden; */
      }

      .testimonial-card:hover article {
        background: #0892b7;
        color: white;
        transition: all 0.3s linear;
      }

      .testimonial-card h1 {
        font-size: 1.2em;
        text-align: left;
        padding-left: 4px;
      }

      .testimonial-card p {
        font-size: 0.8em;
        margin: 0;
        line-height: 1.6;
      }

      .clients-tab-buttons {
        margin-bottom: 2em;
      }

      .clients-tab-buttons button {
        color: black;
        border: none;
        border-radius: 1em;
        padding: 0 3em;
      }

      .clients-tab-buttons button.active {
        color: white;
        background: #0892b7;
      }

      footer p {
        margin: 0;
      }

      .footer-join-us-btn {
        background: none;
        color: white;
        border: 1px solid white;
        padding: 0 1em;
        font-size: 0.8em;
      }

      .footer-join-us-btn:hover {
        background: white;
        border: none;
        color: #0892b7;
      }

      .news .tabs-wrapper a:focus {
        box-shadow: none;
      }

      .mobile-nav {
        display: flex;
        flex-direction: column;
        background: rgba(6, 129, 170, 0.9);
      }

      .mobile-nav > * {
        padding: 0.2em;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      a.mobile-nav-a {
        color: white;
        padding-left: 2em;
      }

      a.mobile-nav-a:hover {
        text-decoration: none;
        background: rgba(160, 185, 194, 0.6);
      }

      .toggle-mobile-nav-btn.btn {
        color: rgba(6, 129, 170, 0.9);
        border: none;
      }

      .toggle-mobile-nav-btn.btn:active {
        background: rgba(6, 129, 170, 0.9);
        color: white;
      }

      .toggle-mobile-nav-btn.btn:focus {
        box-shadow: none;
      }

      @media (max-width: 800px) {
        .features-list {
          background: white;
          padding: 1em;
        }
      }
    </style>
  </head>
  <body data-color="yellow">
    <div class="contact-box-wrapper hide-md">
      <div class="contact-box">
        <ul>
          <li>
            <button class="contact-box-chat"></button>
          </li>
          <li>
            <div class="popover popover-left">
              <div class="popover-container">
                <div class="card">
                  <div class="card-image">
                    <div class="wechat-qr"></div>
                  </div>
                </div>
              </div>
              <button class="contact-box-phone"></button>
            </div>
          </li>
          <li>
            <div class="popover popover-left">
              <div class="popover-container">
                <div class="card">
                  <div class="card-image">
                    <div class="phone"></div>
                  </div>
                </div>
              </div>
              <button class="contact-box-wechat"></button>
            </div>
          </li>
          <li>
            <button class="contact-box-top" onclick="topFunction()"></button>
          </li>
        </ul>
      </div>
    </div>

    <header>
      <div class="container">
        <nav class="navbar">
          <section class="navbar-section">
            <div>
              <a href="/">
                <img src="Logo.png" alt="Logo" />
              </a>
            </div>
          </section>
          <section class="show-md">
            <div style="height: 100%; display: flex; align-items: center">
              <button class="btn btn-lg toggle-mobile-nav-btn">
                <i class="icon icon-menu"></i>
              </button>
            </div>
          </section>
          <div class="hide-md secondary-nav">
            <a class="btn btn-link text-white" href="#">资料下载</a>
            <a class="btn btn-link text-white" href="#">人才招聘</a>
            <a class="btn btn-link text-white" href="#">选择语言</a>
          </div>
          <section class="navbar-section hide-md main-nav">
            <a href="#" class="btn btn-link text-white">首页</a>
            <a href="#" class="btn btn-link text-white">关于我们</a>
            <div class="popover popover-bottom">
              <a href="#" class="btn btn-link text-white dropdown-toggle"
                >产品中心</a
              >
              <div class="popover-container">
                <ul class="menu" style="font-size: 0.85em">
                  <li class="menu-item"><a href="#">永磁变频螺杆空压机</a></li>
                  <li class="menu-item"><a href="#">双极压缩永磁变频</a></li>
                  <li class="menu-item"><a href="#">激光切割机</a></li>
                  <li class="menu-item"><a href="#">无油永磁变频空压机</a></li>
                  <li class="menu-item"><a href="#">后处理设备</a></li>
                </ul>
              </div>
            </div>

            <a href="#" class="btn btn-link text-white">节能计算</a>
            <a href="#" class="btn btn-link text-white">品牌直营店</a>
            <a href="#" class="btn btn-link text-white">城市合伙人</a>
            <a href="#" class="btn btn-link text-white">新闻咨询</a>
            <a href="#" class="btn btn-link text-white">联系我们</a>
          </section>
        </nav>
      </div>
    </header>

    <section class="mobile-nav d-hide">
      <a href="#" class="mobile-nav-a">首页</a>
      <a href="#" class="mobile-nav-a">关于我们</a>
      <div class="popover popover-bottom">
        <a href="#" class="mobile-nav-a dropdown-toggle">产品中心</a>
        <div class="popover-container">
          <ul class="menu" style="font-size: 0.85em">
            <li class="menu-item"><a href="#">永磁变频螺杆空压机</a></li>
            <li class="menu-item"><a href="#">双极压缩永磁变频</a></li>
            <li class="menu-item"><a href="#">激光切割机</a></li>
            <li class="menu-item"><a href="#">无油永磁变频空压机</a></li>
            <li class="menu-item"><a href="#">后处理设备</a></li>
          </ul>
        </div>
      </div>

      <a href="#" class="mobile-nav-a">节能计算</a>
      <a href="#" class="mobile-nav-a">品牌直营店</a>
      <a href="#" class="mobile-nav-a">城市合伙人</a>
      <a href="#" class="mobile-nav-a">新闻咨询</a>
      <a href="#" class="mobile-nav-a">联系我们</a>
    </section>

    <main>
      <div>
        <div
          class="carousel"
          data-flickity='{ "imagesLoaded": true, "percentPosition": false, "autoPlay": 2000, "prevNextButtons": false, "draggable": false, "pauseAutoPlayOnHover": false}'
        >
          <img class="img-responsive" src="5f3ded71db99c.jpg" alt="" />
          <img class="img-responsive" src="5fae67b1ead57.jpg" alt="" />
          <img class="img-responsive" src="5f447b071c977.jpg" alt="" />
          <img class="img-responsive" src="5ee97a5ff3b36.jpg" alt="" />
          <img class="img-responsive" src="5ee97a6a99d3f.jpg" alt="" />
        </div>
      </div>

      <div class="hero components container">
        <div class="hero-body columns">
          <div class="columns column col-11 col-mx-auto col-md-12">
            <ul class="column">
              <li>
                <h4>新一代进口主机</h4>
                <picture class="show-md">
                  <img class="img-responsive" src="001.png" alt="" />
                </picture>
                <p>
                  进口螺杆主机，大转子，低转速，新型5：6非对称转子，瑞典原装进口SKF圆椎滚柱轴承，相同功率排气量增加5-10%以上
                </p>
              </li>
              <li>
                <h4>SKF-轴承</h4>
                <picture class="show-md">
                  <img class="img-responsive" src="002.png" alt="" />
                </picture>
                <p>
                  使用瑞典原装SKF圆锥滚柱重载止推轴承
                  ，使用寿命长达100000小时以上
                </p>
              </li>
              <li>
                <h4>智能型微电脑远程控制系统</h4>
                <picture class="show-md">
                  <img class="img-responsive" src="003.png" alt="" />
                </picture>
                <p>
                  中（英）文显示，轻触式按键，物联网远程通讯功能，菜单操作直观，快捷，方便；通过无线技术掌控你每一台永磁变频空压机使用情况
                </p>
              </li>

              <li>
                <h4>绝佳设计的冷却系统</h4>
                <picture class="show-md">
                  <img class="img-responsive" src="004.png" alt="" />
                </picture>
                <p>
                  采用高效翘片式大换热面积冷却器，换热量盈余30%，压力降低，冷却器不易堵塞，油和过滤器的工作寿命更长
                </p>
              </li>
            </ul>
            <div class="column hide-md">
              <img class="img-responsive" src="peijian - crop.jpg" alt="配件" />
            </div>
            <ul class="column">
              <li>
                <h4>高效永磁电机</h4>
                <picture class="show-md">
                  <img class="img-responsive" src="005.png" alt="" />
                </picture>
                <p>
                  采用高性能汝铁硼永磁体，200℃不失磁，同轴一体环氧浸漆无轴承设计，防护等级IP65，传动效率高，使用寿命长达15年
                </p>
              </li>
              <li>
                <h4>高效永磁电机磁钢</h4>
                <picture class="show-md">
                  <img class="img-responsive" src="006.png" alt="" />
                </picture>
                <p>
                  采用钕铁硼UH38级永磁体，超高内禀矫顽力永磁材料，F级绝缘，电机耐高温，200℃可稳定使用
                  ，35WW360低损耗硅功率密度高，抗去磁能力强
                </p>
              </li>
              <li>
                <h4>节能进气控制系统</h4>
                <picture class="show-md">
                  <img class="img-responsive" src="007.png" alt="" />
                </picture>
                <p>
                  新型意大利进口阀件，进气调整范围广容调阀调节，压力损失小，动作稳定，使用寿命高达10万小时以上
                </p>
              </li>
              <li>
                <h4>高效节能过滤系统</h4>
                <picture class="show-md">
                  <img class="img-responsive" src="008.png" alt="" />
                </picture>
                <p>
                  进口超大油气分离芯、空气滤芯，油过滤器及油气分离器桶设计，从压缩机源头控制过滤精度质量，确保机器在复杂工况下正常稳定运行
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="hero core-tech p-relative">
        <div
          class="core-tech-bg-1 hide-md"
          style="
            position: absolute;
            left: 0;
            top: 0;
            width: 45%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
          "
        ></div>
        <div
          class="core-tech-bg-2 hide-md"
          style="
            position: absolute;
            left: 190px;
            top: 120px;
            width: 18%;
            height: 20%;
            border: 2px solid rgba(255, 255, 255, 0.5);
          "
        ></div>
        <div
          class="core-tech-bg-3 hide-md"
          style="
            position: absolute;
            left: 110px;
            bottom: 100px;
            width: 80px;
            height: 4px;
            background: #00a0dc;
          "
        ></div>
        <div
          class="core-tech-bg-4 hide-md"
          style="
            position: absolute;
            top: 80px;
            right: 50px;
            height: 400px;
            width: 700px;
            background: white;
          "
        ></div>
        <div class="hero-body columns" style="z-index: 2">
          <div class="columns column col-11 col-mx-auto col-md-12">
            <div class="column col-md-12 core-tech-left">
              <h2 style="color: #00a0dc; font-size: 1.5em">万兹莱</h2>
              <h1 style="font-size: 3em; letter-spacing: 1px; font-weight: 500">
                12大核心技术
              </h1>
              <p style="width: 50%; text-indent: 2em; line-height: 2">
                万兹莱公司将立足全球化视野、依托高新技术，打造全球化品牌。公司产品基于用户需求为先，品质为先的经营理念，与广大用户携手前行，共赢未来。
              </p>
            </div>
            <div class="column col-7 col-md-12 core-tech-right">
              <ol class="features-list">
                <li>进口主机、大转子、低转速、长寿命</li>
                <li>同轴一体、分体设计，电机无轴承，没有维护，没有传动损失</li>
                <li>IP65油冷永磁电机，同轴一体环氧浸漆无轴承设计</li>
                <li>高性能矢量永磁同步一体双变频恒压、恒温技术</li>
                <li>高效静音的离心变频风机控制系统</li>
                <li>变频触摸屏控制技术、人力成本降低</li>
                <li>超强的监控互联网技术任您无限扩展，手机、电脑远程控制</li>
                <li>真彩现实、触控100万次左右，支持32种语言设置</li>
                <li>客户用电无需安装电表、显示器直接显示电量</li>
                <li>可为客户量身定制各种型号产品</li>
                <li>
                  每台永磁变频空压机拥有低噪音、低耗能、低维修的特点，平均节能35%以上
                </li>
                <li>
                  人性化的外观设计，美观大方使用，可拆卸过滤网，独特的门卡扣设计，
                  使管理工作轻松简单
                </li>
              </ol>
            </div>
          </div>
        </div>
      </div>

      <div class="hero products columns">
        <div class="hero-body column col-11 col-mx-auto col-md-11">
          <h2 class="text-center text-bold">产品中心</h2>
          <p class="text-center">让万兹莱成为您理想的螺杆空压机服务商</p>
          <div class="columns products-gallary">
            <div class="column">
              <a href="#"
                ><img
                  class="img-responsive"
                  src="indexprbg01.png"
                  alt=""
                /><span>永磁变频螺杆空压机</span></a
              >
            </div>
            <div class="column">
              <a href="#"
                ><img
                  class="img-responsive"
                  src="indexprbg02.png"
                  alt=""
                /><span>双级压缩永磁变频螺杆空压机</span></a
              >
            </div>
            <div class="column">
              <a href="#"
                ><img
                  class="img-responsive"
                  src="indexprbg03.png"
                  alt=""
                /><span>激光切割机</span></a
              >
            </div>
            <div class="column">
              <a href="#"
                ><img
                  class="img-responsive"
                  src="indexprbg04.png"
                  alt=""
                /><span>无油永磁变频空压机</span></a
              >
            </div>
            <div class="column">
              <a href="#"
                ><img
                  class="img-responsive"
                  src="indexprbg05.png"
                  alt=""
                /><span>后处理设备</span></a
              >
            </div>
          </div>
        </div>
      </div>

      <div class="hero calc-page">
        <div class="hero-body columns">
          <div class="column col-11 col-mx-auto col-md-12">
            <h2 class="text-center">万兹莱空压机节能计算</h2>
            <form id="calc">
              <section class="columns calc-inputs">
                <label class="calc-inputs-item column col-3 col-md-6"
                  ><div>电机效率</div>
                  <input type="text" required />
                </label>
                <label class="calc-inputs-item column col-3 col-md-6"
                  ><div>电机功率因数</div>
                  <input type="text" required />
                </label>
                <label class="calc-inputs-item column col-3 col-md-6"
                  ><div>加载时间</div>
                  <input type="text" placeholder="小时" required />
                </label>
                <label class="calc-inputs-item column col-3 col-md-6"
                  ><div>加载电流</div>
                  <input type="text" placeholder="安培" required />
                </label>
                <label class="calc-inputs-item column col-3 col-md-6"
                  ><div>卸载时间</div>
                  <input type="text" placeholder="小时" required />
                </label>
                <label class="calc-inputs-item column col-3 col-md-6"
                  ><div>卸载电流</div>
                  <input type="text" placeholder="安培" required />
                </label>
                <label class="calc-inputs-item column col-3 col-md-6"
                  ><div>电费单价</div>
                  <input type="text" placeholder="元/度" required />
                </label>
                <label class="calc-inputs-item column col-3 col-md-6"
                  ><div>每天运行小时</div>
                  <input type="text" placeholder="小时" required
                /></label>
              </section>
              <section class="calc-results columns">
                <output class="column col-2 col-ml-auto col-6-md"
                  >比普通空压机每年省电量<br /><span
                    class="calc-result-1"
                  ></span>
                  度</output
                >
                <output class="column col-2 col-mr-auto col-6-md"
                  >比普通空压机每年省电费<br /><span
                    class="calc-result-2"
                  ></span>
                  元</output
                >
              </section>
              <section class="text-center calc-inputs-buttons">
                <input class="btn" type="reset" value="一键清空" />
                <input class="btn" type="submit" value="省电计算" />
              </section>
            </form>
          </div>
        </div>
      </div>

      <div class="hero columns clients">
        <div class="text-center column col-11 col-mx-auto col-md-11">
          <h2>风雨同行·共同成长</h2>
          <p>
            现在，合作的几十家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。
          </p>
          <div class="clients-tab-buttons">
            <button class="btn active" data-tab="1" id="btn-tab-1">
              合作客户
            </button>
            <button class="btn" data-tab="2" id="btn-tab-2">客户心声</button>
          </div>
          <div class="clients-tab-1">
            <div class="customer-list columns col-gapless">
              <div class="column col-5 col-md-12 p-relative">
                <img class="img-responsive" src="i_img1.jpg" alt="10年有经验" />
                <div class="clients-nav">
                  <button class="btn" disabled onclick="switchClientsGallery()">
                    <i class="icon icon-arrow-left"></i>
                  </button>
                  <button class="btn" onclick="switchClientsGallery()">
                    <i class="icon icon-arrow-right"></i>
                  </button>
                </div>
              </div>

              <ul
                class="column col-7 col-md-12 columns col-gapless bands-gallery bands-gallery-1"
              >
                <li class="column col-4">
                  <div class="img-box">
                    <img src="i_img2.jpg" alt="光大环保" />
                  </div>
                </li>
                <li class="column col-4">
                  <div class="img-box">
                    <img src="i_img2_6.jpg" alt="南深股份" />
                  </div>
                </li>
                <li class="column col-4">
                  <div class="img-box">
                    <img src="i_img2_2.jpg" alt="大族激光" />
                  </div>
                </li>
                <li class="column col-4">
                  <div class="img-box">
                    <img src="i_img2_3.jpg" alt="华润" />
                  </div>
                </li>
                <li class="column col-4">
                  <div class="img-box">
                    <img src="i_img2_4.jpg" alt="畅捷通" />
                  </div>
                </li>
                <li class="column col-4">
                  <div class="img-box">
                    <img src="i_img2_5.jpg" alt="康美" />
                  </div>
                </li>
              </ul>

              <ul
                class="column columns col-gapless bands-gallery bands-gallery-2 d-hide"
              >
                <li class="column col-4">
                  <div class="img-box">
                    <img src="i_img2_11.jpg" alt="和诗" />
                  </div>
                </li>
                <li class="column col-4">
                  <div class="img-box">
                    <img src="i_img2_12.jpg" alt="简宁安" />
                  </div>
                </li>
                <li class="column col-4">
                  <div class="img-box">
                    <img src="i_img2_13.jpg" alt="柯丽尔" />
                  </div>
                </li>
                <li class="column col-4">
                  <div class="img-box">
                    <img src="i_img2_14.jpg" alt="米希兰" />
                  </div>
                </li>
                <li class="column col-4">
                  <div class="img-box">
                    <img src="i_img2_15.jpg" alt="普乐坊" />
                  </div>
                </li>
                <li class="column col-4">
                  <div class="img-box">
                    <img src="i_img2_16.jpg" alt="普罗米修" />
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="clients-tab-2 d-hide">
            <div class="columns">
              <div class="column testimonial-card columns">
                <div class="column col-auto f-center">
                  <img alt="光大环保" src="i_img3.jpg" class="" />
                </div>
                <article class="column">
                  <h1>光大环保</h1>
                  <p>
                    我是光大环保项目部范总，不谦虚的说，光大环保项目外包很多多，但是光大环保在选择了和万兹莱合作后在制作过程还有客服服务中，非常的满意！万兹莱能够根据我们的基础要求进行逻辑思维拓展，能够使我们的初步想法转化为实际的设计效果，使我们的用户体验达到更加完美的效果，这次和万兹莱合作，光大非常满意，也希望在未来，能够和万兹莱就网站建设领域进行更深层次的合作，共同促进网站建设行业健康蓬勃的发展！
                  </p>
                </article>
              </div>
              <div class="column testimonial-card columns">
                <div class="column col-auto f-center">
                  <img alt="安托山" src="solution_img2.jpg" class="" />
                </div>
                <article class="column">
                  <h1>安托山</h1>
                  <p>
                    我是安托山技术部余总，10多亿元人民币建造的安托山沙井高科技工业园，占地28万平方米,
                    总建筑面积86万平方米，在公司网站建设中，经过层层筛选，我们选择万兹莱为我们提供网站建设服务，而在以后合作的日子里，我们深刻的感受到了万兹莱人的敬业！7*24小时的售后服务，让我们随时能够找到售后客服，建站后期万兹莱也会及时的巡护网站，一旦发现网站有漏洞，也会及时的提出并帮我们解决，这种主动热情的售后服务使我们看到了一个企业真正的文化和内涵，我们也明白选择万兹莱我们没有选择错！
                  </p>
                </article>
              </div>
            </div>
            <div class="columns">
              <div class="column testimonial-card columns">
                <div class="column col-auto f-center">
                  <img alt="北大方正" src="solution_img3.jpg" class="" />
                </div>
                <article class="column">
                  <h1>北大方正</h1>
                  <p>
                    我是方正网络技术总监陈文磊，不可否认，万兹莱是一个很朝气蓬勃的团队，也是一个很积极向上的团队，每一次沟通合作，总能给我们带来新的东西，有时候我们不仅仅在网站建设方面进行合作，还常常就我们的品牌策略进行深入的洽谈，他们能将我们想要的东西甚至我们还没考虑到的细节展示在我们的网站中，为我们的品牌形象做出更精准的阐释。再次我也希望，我们方正应该学习万兹莱的团队精神！
                  </p>
                </article>
              </div>
              <div class="column testimonial-card columns">
                <div class="column col-auto f-center">
                  <img alt="华润科技 " src="solution_img4.jpg" class="" />
                </div>
                <article class="column">
                  <h1>华润科技</h1>
                  <p>
                    我是华润科技部经理田文军，这已经是我们华润第四次和万兹莱合作了，与前三次一样依然合作的很开心。与万兹莱合作让我放心的是万兹莱的设计、服务和专业性。现在深圳有很多号称可以做个性化网站定制的公司，但太多设计非常一般、服务不好，且鱼龙混杂，一不小心就会被骗，还有可能中途合作不下去。很多公司也都仅仅只能做网站建设服务，无法从专业上给予我们建设性的意见，这是很多公司都无法办到的，但万兹莱做到了。无论在设计、服务上还是专业性上，万兹莱让我都很放心，愿万兹莱再接再厉，为企业提供更多更优质服务。
                  </p>
                </article>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="news hero columns">
        <div class="hero-body column col-11 col-mx-auto col-md-11">
          <div class="tabs-wrapper text-center">
            <h2>新闻资讯</h2>
            <p class="text-small">让万兹莱成为您理想的螺杆空压机服务商</p>
            <ul class="tab tab-block">
              <li class="tab-item">
                <a href="#news-list-1">公司新闻</a>
              </li>
              <li class="tab-item"><a href="#news-list-2">行业新闻</a></li>
              <li class="tab-item"><a href="#news-list-3">常见问题</a></li>
            </ul>
          </div>
          <ul class="news-list" id="news-list-1">
            <li class="columns py-2">
              <div class="column col-auto f-center mr-2 hide-md">
                <img src="news.jpg" alt="News" />
              </div>
              <div class="column">
                <h1>这家空压机厂2019年的成功经营，能带给我们怎样的启示？</h1>
                <p>
                  2019年即将过去，各企事业单位都沉浸在新年前的喜悦中。这个时节，坐落在嘉定区的万兹莱压缩机械（上海）有限公司却依然一排忙碌景象。今年，万兹莱圆满完成了年度经营指标，不但为来年的发展开了个好头，也为万兹莱的第二个五年发展计划打下坚实基础。
                </p>
              </div>
              <div class="column col-1 f-center ml-2 hide-md">
                <time>2020-03-05</time>
              </div>
            </li>
            <li class="columns py-2">
              <div class="column col-auto f-center mr-2 hide-md">
                <img src="news.jpg" alt="News" />
              </div>
              <div class="column">
                <h1>这家空压机厂2019年的成功经营，能带给我们怎样的启示？</h1>
                <p>
                  2019年即将过去，各企事业单位都沉浸在新年前的喜悦中。这个时节，坐落在嘉定区的万兹莱压缩机械（上海）有限公司却依然一排忙碌景象。今年，万兹莱圆满完成了年度经营指标，不但为来年的发展开了个好头，也为万兹莱的第二个五年发展计划打下坚实基础。
                </p>
              </div>
              <div class="column col-1 f-center ml-2 hide-md">
                <time>2020-03-05</time>
              </div>
            </li>
          </ul>
          <ul class="news-list" id="news-list-2">
            <li class="columns py-2">
              <div class="column col-auto f-center mr-2 hide-md">
                <img src="news.jpg" alt="News" />
              </div>
              <div class="column">
                <h1>这家空压机厂2020年的成功经营，能带给我们怎样的启示？</h1>
                <p>
                  2019年即将过去，各企事业单位都沉浸在新年前的喜悦中。这个时节，坐落在嘉定区的万兹莱压缩机械（上海）有限公司却依然一排忙碌景象。今年，万兹莱圆满完成了年度经营指标，不但为来年的发展开了个好头，也为万兹莱的第二个五年发展计划打下坚实基础。
                </p>
              </div>
              <div class="column col-1 f-center ml-2 hide-md">
                <time>2020-03-05</time>
              </div>
            </li>
          </ul>
          <ul class="news-list" id="news-list-3">
            <li class="columns py-2">
              <div class="column col-auto f-center mr-2 hide-md">
                <img src="news.jpg" alt="News" />
              </div>
              <div class="column">
                <h1>这家空压机厂2021年的成功经营，能带给我们怎样的启示？</h1>
                <p>
                  2019年即将过去，各企事业单位都沉浸在新年前的喜悦中。这个时节，坐落在嘉定区的万兹莱压缩机械（上海）有限公司却依然一排忙碌景象。今年，万兹莱圆满完成了年度经营指标，不但为来年的发展开了个好头，也为万兹莱的第二个五年发展计划打下坚实基础。
                </p>
              </div>
              <div class="column col-1 f-center ml-2 hide-md">
                <time>2020-03-05</time>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </main>

    <footer>
      <div class="columns">
        <div class="columns col-11 col-mx-auto col-md-12">
          <div class="column col-lg-12 text-center">
            <img src="Logo.png" alt="Logo" />
            <p class="text-white text-small text-center footer-trans my-2">
              欢迎关注万兹莱官方微信或拨打400客服电话详询！！
            </p>
            <figure class="figure col-4 col-mx-auto">
              <img class="img-responsive" src="ewm2.jpg" alt="QR Code" />
              <figcaption class="text-center text-small footer-trans my-2">
                官方公众号
              </figcaption>
            </figure>
          </div>

          <div class="divider-vert hide-md"></div>

          <div class="column footer-nav col-6 hide-md">
            <h1 class="footer-nav-title">网站导航</h1>
            <nav class="columns">
              <ul class="column">
                <li><a href="#">关于我们</a></li>
                <li><a href="#">品牌诠释</a></li>
                <li><a href="#">品牌文化</a></li>
                <li><a href="#">品牌优势</a></li>
                <li><a href="#">品牌荣誉</a></li>
                <li><a href="#">人才招聘</a></li>
              </ul>
              <ul class="column">
                <li><a href="#">产品中心</a></li>
                <li><a href="#">永磁变频螺杆空压机</a></li>
                <li><a href="#">双级压缩永磁变频螺杆空压机</a></li>
                <li><a href="#">激光切割机</a></li>
                <li><a href="#">无油永磁变频空压机</a></li>
              </ul>
              <ul class="column">
                <li><a href="#">品牌直营店</a></li>
              </ul>
              <ul class="column">
                <li><a href="#">城市合伙人</a></li>
              </ul>
              <ul class="column">
                <li><a href="#">新闻资讯</a></li>
                <li><a href="#">公司资讯</a></li>
                <li><a href="#">行业资讯</a></li>
                <li><a href="#">常见问题</a></li>
              </ul>
              <ul class="column">
                <li><a href="#">联系我们</a></li>
              </ul>
            </nav>
          </div>

          <div class="divider-vert hide-md"></div>

          <div class="column hide-md">
            <p>联系我们</p>
            <h4 class="my-2">156 1892 2188</h4>
            <p class="text-small my-1 text-gray">
              地址：上海市嘉定区泰云路528号
            </p>
            <p class="text-small my-1 text-gray">电话：021-3919 3352</p>
            <div style="margin-top: 2em">
              <button class="btn footer-join-us-btn">加入我们</button>
            </div>
          </div>
        </div>
      </div>

      <div id="copyright" class="text-center text-tiny">
        Copyright @ 2020 万兹莱压缩机械（上海）有限公司 版权所有
        备案号：沪ICP备15020336号-5 技术支持：撼云网络
      </div>
    </footer>
    <script src="index.js"></script>
  </body>
</html>
